<template>
  <view class="detail-container">
    <view class="detail-content">
      <text class="detail-title">{{ cardData.title }}</text>
      <image class="detail-image" :src="cardData.imageUrl" mode="widthFix"></image>
      <text class="detail-desc">{{ cardData.detail }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cardData: {}
    };
  },
  onLoad(options) {
    if (options.data) {
      this.cardData = JSON.parse(decodeURIComponent(options.data));
    }
  }
};
</script>

<style scoped>
.detail-container {
  height: 100vh;
  position: relative;
  background: #f5f1e8;
  padding: 20rpx;
}

.detail-image {
  width: 100%;
  border-radius: 10rpx;
}

.detail-content {
  margin-top: 30rpx;
}

.detail-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.detail-desc {
  font-size: 30rpx;
  color: #666;
  line-height: 1.6;
}
</style>